<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/8/12
  Time: 12:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>


<head>
    <title>details</title>
    <style>
        .wrap {
            width: 70%;
            height: 1000px;
            margin: 0 auto;
        }

        .wrap .wrap-left {
            width: 40%;
            height: 700px;
            float: left;
            margin: 0 auto;
        }

        .wrap-left > img {
            width: 560px;
            height: 560px;
        }

        .wrap .wrap-right {
            width: 40%;
            height: 700px;
            float: right;
        }

        .orange {
            color: #ff6700;
            font-size: 14px;
        }

        .button {
            width: 210px;
            height: 50px;
            color: #b0b0b0;
            margin-right: 15px;
            margin-bottom: 15px;
            border: #b0b0b0;
            outline: none;
        }

        .button:hover {
            border: #ff6700;
            color: #ff6700;
        }

        a {
            text-decoration: none;
            color: white;
        }

        .wrap-right .title{
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<%--<%@include file="head.jsp"%>--%>
<div class="wrap">
    <div class="wrap-left">
        <img src="${good.activePath}" alt="">
    </div>
    <div class="wrap-right">
        <div class="title">${good.title}</div>
        <span class="orange">「付尾款前1万名加1元得99元十周年纪念T恤，前1万名赠69元皮革保护壳，前5千名赠十周年纪念礼盒」</span>
        <span class="content" style="color: #b0b0b0; font-size: 14px">${good.content}</span>
        <p class="orange">小米自营</p>
        <hr style="color: #b0b0b0">
        <div class="price orange">${good.price}元</div>
        选择版本
        <br>
        <button class="button">8GB+128GB</button>
        <button class="button">8GB+256GB</button>
        <br>
        <button class="button">12GB+256GB</button>
        <br>
        选择颜色
        <br>
        <button class="button">国风雅灰</button>
        <button class="button">钛银黑</button>
        <br>
        <button class="button">冰海蓝</button>
        <button class="button">蜜桃金</button>
        <div style="color: #ff6700;font-size: 25px;font-weight: bold;">总计${good.price}元</div>
        <span>购买数量：</span>
        <input style="height: 50px;" id="orders" type="number" min="1" value="1">

        <br>
        <br>

        <div style="background-color: #ff6700 ;width: 200px;height: 50px; margin: 0 auto; text-align: center">
            <a id="shopcarLink" onclick="updateUrl()" href="/api/good/select?gid=aid=${userid}&${good.gid}"
               style="line-height: 50px;color: white">
                加入购物车</a>
        </div>

    </div>
</div>

<div>
    <jsp:include page="/user/footer.jsp"/>
</div>

<script>
    let sessionUserid = '${user.userid}';
    let sessionUsername = '${user.username}';
    console.log(sessionUserid);
    console.log(sessionUsername);

    if (sessionUserid.length <= 0) {
        sessionUserid = '1';
    }

    //方法 https://www.w3h5.com/post/355.html

    function updateUrl() {
        let orders = document.getElementById("orders").value;

        document.getElementById('shopcarLink').setAttribute('href', '/api/good/select?aid=' + sessionUserid + '&gid=${good.gid}&orders=' + orders);
    }


</script>
</body>
</html>
